import React from 'react';
import './AboutPage.css';

const AboutPage = () => {
  const teamMembers = [
    {
      id: 1,
      name: "张工程师",
      position: "技术总监",
      department: "技术研发部",
      avatar: "👨‍💻",
      description: "10年机器人技术研发经验，专注于人工智能算法优化"
    },
    {
      id: 2,
      name: "李经理",
      position: "产品经理",
      department: "产品管理部",
      avatar: "👩‍💼",
      description: "8年产品管理经验，负责产品规划和市场策略制定"
    },
    {
      id: 3,
      name: "王博士",
      position: "首席科学家",
      department: "研究院",
      avatar: "👨‍🔬",
      description: "15年传感器技术研究经验，多项国际专利持有者"
    },
    {
      id: 4,
      name: "陈总监",
      position: "市场总监",
      department: "市场部",
      avatar: "👩‍💼",
      description: "12年市场营销经验，专注于科技产品市场推广"
    }
  ];

  return (
    <div className="about-page">
      <div className="container">
        <div className="page-header">
          <h1>关于我们</h1>
          <p>北京灵动无界科技有限公司 - 领先的前沿科技产品服务商</p>
        </div>

        <section className="company-intro">
          <div className="intro-content">
            <h2>公司简介</h2>
            <p>
              北京灵动无界科技有限公司是一家前沿科技创新企业，围绕机电、控制、人工智能、机器人、电子信息等核心学科领域，全力投身本科工程教育及现代职业教育改革创新实验平台的研发；深度聚焦最新技术科研方向，为高校及科研机构提供契合各学科研究的科研支撑平台；精准对接新技术产业应用，积极推动产研融合发展，助力科研成果转化应用；
              通过卓越的教育资源整合、开创性的科研探索与高效的产业协同，全力塑造全方位的教育赋能生态体系，为培育顶尖专业人才、推动科研突破创新、促进产业升级变革持续注入核心动力，铸就全球教育与产业协同发展的卓越典范。
            </p>
          </div>
          <div className="intro-stats">
            <div className="stat-item">
              <div className="stat-number">500+</div>
              <div className="stat-label">服务客户</div>
            </div>
            <div className="stat-item">
              <div className="stat-number">8</div>
              <div className="stat-label">年经验</div>
            </div>
            <div className="stat-item">
              <div className="stat-number">50+</div>
              <div className="stat-label">产品线</div>
            </div>
            <div className="stat-item">
              <div className="stat-number">100%</div>
              <div className="stat-label">客户满意度</div>
            </div>
          </div>
        </section>

        <section className="team-section">
          <h2>核心团队</h2>
          <div className="team-grid">
            {teamMembers.map(member => (
              <div key={member.id} className="team-card">
                <div className="team-avatar">{member.avatar}</div>
                <h3 className="team-name">{member.name}</h3>
                <p className="team-position">{member.position}</p>
                <p className="team-department">{member.department}</p>
                <p className="team-description">{member.description}</p>
              </div>
            ))}
          </div>
        </section>

      </div>
    </div>
  );
};

export default AboutPage;
